<template>
    <div>



      <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="30%"
        >
        <bookAdd ref="book"  @update="updateSuccess" :updateBook="updateBoook"></bookAdd>
      </el-dialog>
      <div>

        <el-row :gutter="3">
          <el-col :span="6">

         </el-col>
          <el-col :span="6">
            <el-input v-model="book.bookName" placeholder="根据书名查找" :clearable=true @clear="getBookList"  @change="selectBook"  @input="updateBookByInput"></el-input>
          </el-col>
          <el-col :span="6">
            <el-input v-model="book.author" placeholder="根据作者名字进行查找" :clearable=true @clear="getBookList"  @change="selectBook"  @input="updateBookByInput"></el-input>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" @click="selectBook">搜索</el-button>
          </el-col>
        </el-row>

      </div>

      <el-table
          :data="bookList"
          style="width: 100%">
        <el-table-column
            prop="author"
            label="作者"
            width="180">
        </el-table-column>
        <el-table-column
            prop="bookName"
            label="书名"
            width="180">
        </el-table-column>
        <el-table-column label="图片">
          <template slot-scope="scope">
            <el-image  style="width: 200px;height: 200px" :src="scope.row.bookImage"></el-image>
          </template>
        </el-table-column>
        <el-table-column
            prop="publisher"
            label="出版社">
        </el-table-column>
        <el-table-column
            prop="price"
            label="图书价格">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
</template>

<script>
import bookAdd from "@/views/admin/book/bookAdd.vue";

import {listSearchMixin} from "@/config/mixin";


export default {
  name: "bookManage",
  components: {
    bookAdd,
  },
  mixins:[listSearchMixin],
  data() {
    return {
      options:[{
        value:'bookName',
        label:'书名'
      }],
      book:{
        bookName:null,
        author:null,
        version:null,
        publisher:null,
        price:null,
        count:null,
        bookType:null,
        bookImage:null,
        rate:null
      },
      bookList: [],
      //当前页面
      current:1,
      //总数量
      total:0,
      //一页多少
      size:10,
      dialogVisible:false,
      updateBoook:[],
    }
  },
  created() {
    this.getBookList();
    this.getBookTotal();
  },
  methods: {
    updateBookByInput(data){
      if(data.length==0){
        this.getBookList();
      }
    },
    selectBook(){
      let params = {
        url:'book',
        method:'get',
        payload:this.book
      }
      this.sendReq(params, res => {
        this.bookList  = res.data.records;

      })

    },
    updateSuccess(data){
        if(data==1){
          this.dialogVisible =  !this.dialogVisible;
        }
    },
    handleSizeChange(size){
      this.size = size;
      this.getBookList();
    },
    handleCurrentChange(page){
      this.current = page;
       this.getBookList();
    },
    getBookTotal(){
      var params = {
        url:'book/total',
        method:'get'
      }

      this.sendReq(params, res=>{
        this.total = res.data
      })
    },
    getBookList() {

      var params = {
        url:'book',
        method:'get',
        payload:{
          size:this.size,
          current:this.current
        }
      }

      this.sendReq(params, res=>{
        this.bookList  = res.data.records
      })
    },
    handleEdit(index,data){
      this.updateBoook = data;
      this.dialogVisible =  !this.dialogVisible;
      //
      this.$nextTick(()=>{
        this.$refs.book.setUpdateBook();
      })
    },
    handleDelete(index,data){
        let params = {
          url:'book',
          method:'delete',
          payload:{
            idList:data.id
          }
        }
        this.sendReq(params,res =>{
          console.log(res);
          this.bookList.splice(index,1)
          this.total = this.total-1;
          this.$message("删除成功")
        })

    }

  },
}
</script>

<style scoped>

</style>
